<template>
  <form :action="url" class="dropzone" :id="id"></form>
</template>

<script>
var Dropzone = require('./dropzone')
Dropzone.autoDiscover = false
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    url: {
      type: String,
      required: true
    },
    clickable: {
      type: Boolean,
      default: true
    },
    acceptedFileTypes: {
      type: String
    },
    thumbnailHeight: {
      type: Number,
      default: 160
    },
    thumbnailWidth: {
      type: Number,
      default: 160
    },
    showRemoveLink: {
      type: Boolean,
      default: true
    },
    maxFileSizeInMB: {
      type: Number,
      default: 2
    },
    maxNumberOfFiles: {
      type: Number,
      default: 5
    },
    autoQueue: {
      type: Boolean,
      default: false
    },
    autoProcessQueue: {
      type: Boolean,
      default: true
    },
    autoRemoveSuccessFile: {
      type: Boolean,
      default: true
    },
    useCustomDropzoneOptions: {
      type: Boolean,
      default: false
    },
    dropzoneOptions: {
      type: Object
    },
    dictInvalidFileType: {
      type: String,
      default: '不支持的文件类型!'
    },
    dictMaxFilesExceeded: {
      type: String,
      default: '超出最大上传文件数量!'
    },
    dictRemoveFile: {
      type: String,
      default: '移除文件'
    },
    dictCancelUploadConfirmation: {
      type: String,
      default: '确定要取消正在上传的文件?'
    },
    dictCancelUpload: {
      type: String,
      default: '取消上传'
    },
    dictFileTooBig: {
      type: String,
      default: '文件尺寸超限!'
    },
  },

  mounted() {
    var element = document.getElementById(this.id)
    if (!this.useCustomDropzoneOptions) {
      this.dropzone = new Dropzone(element, {
        clickable: this.clickable,
        thumbnailWidth: this.thumbnailWidth,
        thumbnailHeight: this.thumbnailHeight,
        maxFiles: this.maxNumberOfFiles,
        maxFilesize: this.maxFileSizeInMB,
        dictRemoveFile: 'Remove',
        addRemoveLinks: this.showRemoveLink,
        acceptedFiles: this.acceptedFileTypes,
        autoQueue: this.autoQueue,
        autoProcessQueue: this.autoProcessQueue,
        autoRemoveSuccessFile: this.autoRemoveSuccessFile,
        dictInvalidFileType: this.dictInvalidFileType,
        dictMaxFilesExceeded: this.dictMaxFilesExceeded,
        dictRemoveFile: this.dictRemoveFile,
        dictCancelUploadConfirmation: this.dictCancelUploadConfirmation,
        dictCancelUpload: this.dictCancelUpload,
        dictFileTooBig: this.dictFileTooBig,
        dictDefaultMessage: '<i style="font-size:3em" class="material-icons">cloud_upload</i><br>拖拽至此处或单击后选择要上传的文件',
        previewTemplate: '<div class="dz-preview dz-file-preview">  <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px"><img data-dz-thumbnail /></div>  <div class="dz-details">    <div class="dz-size"><span data-dz-size></span></div>    <div class="dz-filename"><span data-dz-name></span></div>  </div>  <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>  <div class="dz-error-message"><span data-dz-errormessage></span></div>  <div class="dz-success-mark"> <i class="material-icons">done</i> </div>  <div class="dz-error-mark"><i class="material-icons">error</i></div></div>'
      })
    } else {
      this.dropzone = new Dropzone(element, this.dropzoneOptions)
    }

    // Handle the dropzone events
    var vm = this
    this.dropzone.on('addedfile', function (file) {
      vm.$emit('vdropzone-fileAdded', file)
    })

    this.dropzone.on('removedfile', function (file) {
      vm.$emit('vdropzone-removedFile', file)
    })

    this.dropzone.on('success', function (file, response, e) {
      vm.$emit('vdropzone-success', file, response, e)
    })

    this.dropzone.on('error', function (file, error, xhr) {
      vm.$emit('vdropzone-error', file, error, xhr)
    })

  },
  methods: {
    enqueueFiles: function () {
      this.dropzone.enqueueFiles();
    },
    // removeFile: function (file) {
    //   this.dropzone.removeFile(file)
    // },
    removeAllFiles: function () {
      this.dropzone.removeAllFiles(true)
    },
    processQueue: function () {
      this.dropzone.processQueue()
    },
  }
}

</script>

<style>
@import url('./dropzone.css');
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

html {
  background-color: #F9F9F9;
}

.dropzone {
  border: 2px solid #E5E5E5;
  font-family: 'Roboto', sans-serif;
  color: #777;
  transition: background-color .2s linear;
}

.dropzone:hover {
  background-color: #F6F6F6;
}


i {
  color: #CCC;
}

.dropzone .dz-preview .dz-image {
  border-radius: 0px;
}

.dropzone .dz-preview:hover .dz-image img {
  transform: none;
  -webkit-filter: none;
}

.dropzone .dz-preview .dz-details {
  bottom: 0px;
  top: 0px;
  color: white;
  background-color: rgba(80, 191, 255, 0.7);
  transition: opacity .2s linear;
  text-align: left;
}

.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
  background-color: transparent;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: none;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  background-color: transparent;
  border: none;
}

.dropzone .dz-preview .dz-remove {
  position: absolute;
  z-index: 30;
  color: white;
  margin-left: 15px;
  padding: 5px;
  top: inherit;
  bottom: 15px;
  border: 2px white solid;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.1px;
  opacity: 0;
}

.dropzone .dz-preview:hover .dz-remove {
  opacity: 1;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
  margin-left: -40px;
  margin-top: -50px;
}

.dropzone .dz-preview .dz-success-mark i,
.dropzone .dz-preview .dz-error-mark i {
  color: white;
  font-size: 5rem;
}
</style>
